<template>
  <div class="color-picker" :class="[mode === 'line' && 'color-picker--line']">
    <el-color-picker
      @change="onChange"
      v-model="color"
      @input="onChange"
      class="color-picker-inner"
    />
  </div>
</template>
<script>

export default {
  name: 'color-picker',
  props: {
    value: String,
    mode: {
      type: String,
    },
  },
  data() {
    return {
      color: '',
    };
  },
  methods: {
    onChange(color) {
      this.color = color;
      this.$emit('change', color);
    },
  },
  watch: {
    value(val) {
      this.color = val;
    }
  },
}
</script>
<style lang="scss">
.color-picker {
  &--line {
    :global {
      .el-color-picker__trigger {
        visibility: hidden;
      }
    }
  }
}
</style>